<template>

	<div>
		
		显示隐藏的状态:{{isShow}} <br>
		<button type="button" @click="isShow = !isShow ">显示/隐藏</button>	
		
		
		
		<!-- v-if="isShow"
			控制元素的 显示 (组件 触发声明周期) 重新创建 DOM节点
					  隐藏(DOM节点给移除了)
			
			
			c:if  c:else
			
			
		 -->
		<div v-if="isShow">DOM元素的样式绑定 if </div>
		
		
		<!-- v-show
				显示  
				隐藏： display：none
			
		 -->
		<div v-show="isShow">DOM元素的样式绑定 show</div>
		
		  
		  
		  <hr>
		  
		  
		<button @click="changeGender">设置男女</button> <br>
		<button @click="gender ='male' ">设置未知</button> <br>
		
	    性别:{{gender}} <br>
		
		<div v-if="gender == '男'"> 男士的 广告</div>
		<div v-else-if="gender =='女'"> 女士广告</div>
		<div v-else> 大众广告</div>
		
		
		
	</div>
	
	
</template>

<script>
	export default{
		name:'IfComponent',
		data(){
			return {
				isShow:true,
				gender:'男'
			}
		},
		methods:{
			changeGender(){
				if(this.gender === '男'){
					this.gender ='女'
				}else{
					this.gender ='男'
				}
			}
		}
	}
	
	
</script>

<style scoped>
	
	
	
	
</style>